<template>
	<div class="user-edit">
		<!-- Drawer抽屉 -->
		<Drawer :title="title" v-model="visible" width="720" draggable :mask-closable="type == '0'">
			<div :style="{ maxHeight: maxHeight }" class="drawer-content">
				<Form label-colon v-show="type != '2'">
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="测评ID">
							{{ form.id }}
							<Tooltip trigger="hover" placement="right" content="账户已禁用">
								<Icon v-show="form.status == -1" type="md-lock" size="18"
									style="margin-left: 10px; cursor: pointer" />
							</Tooltip>
						</FormItem>
						</Col>
					</Row>
				</Form>
				<Form ref="form" :model="form" :rules="formValidate" label-position="top">
					<Row :gutter="32">
						<Col span="12">
						<FormItem label="测评标题" prop="title">
							<Input v-model="form.title" />
						</FormItem>
						</Col>
						<Col span="12">
						<FormItem label="备注" prop="remark">
							<Input v-model="form.remark" />
						</FormItem>
						</Col>
					</Row>
					<FormItem label="图片">
						<upload-pic-thumb v-model="pics"></upload-pic-thumb>
					</FormItem>
				</Form>
				
				<div v-if="type == '0'">
					<Divider />
					<p class="drawer-title">测评评论</p>
					<Row class="operation">
					  <Button @click="delAll" icon="md-trash">批量删除</Button>
					</Row>
					<Table
						:loading="loading"
						border
						:columns="columns"
						:data="comments"
						sortable="custom"
						@on-selection-change="showSelect"
						ref="table"
					></Table>
				</div>
			</div>
			<div class="drawer-footer br" v-show="type != '0'">
				<Button type="primary" :loading="submitLoading" @click="submit">提交</Button>
				<Button @click="visible = false">取消</Button>
			</div>
		</Drawer>
		
		<Modal title="回复评论" v-model="replyVisible" width="920" :footer-hide="true" @on-cancel="replyVisible = false">
			<Card>
				<Row><Table border :columns="replyColumns" :data="replyData" sortable="custom" ref="table"></Table></Row>
			</Card>
		</Modal>
	</div>
</template>

<script>
	import {
		saveOrUpdateSzAppraisal,
		getSzAppraisalDetail,
		removeSzOrRealComment
	} from "@/api/index";
	import {
		validateUsername,
		validateMobile,
		validatePassword,
	} from "@/libs/validate";
	import uploadPicThumb from "@/views/my-components/xboot/upload-pic-thumb";
	export default {
		name: "user",
		components: {
			uploadPicThumb
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			data: {
				type: Object,
			},
			type: {
				type: String,
				default: "0",
			},
		},
		data() {
			return {
				pic: [],
				visible: this.value,
				title: "",
				submitLoading: false,
				loading: false,
				replyVisible: false,
				maxHeight: 510,
				form: {},
				formValidate: {
					// 表单验证规则
					username: [{
							required: true,
							message: "请输入登录账号",
							trigger: "change"
						},
						{
							validator: validateUsername,
							trigger: "change"
						},
					],
					nickname: [{
						required: true,
						message: "请输入用户名",
						trigger: "change"
					}, ],
					mobile: [{
							required: true,
							message: "请输入手机号",
							trigger: "change"
						},
						{
							validator: validateMobile,
							trigger: "change"
						},
					],
					password: [{
							required: true,
							message: "请输入密码",
							trigger: "change"
						},
						{
							validator: validatePassword,
							trigger: "change"
						},
					],
					email: [{
							required: true,
							message: "请输入邮箱地址"
						},
						{
							type: "email",
							message: "邮箱格式不正确"
						},
					]
				},
				pics: [],
				comments: [],
				columns: [
					{
						type: 'selection',
						width: 60,
						align: 'center',
						fixed: 'left'
					},
					{
						type: 'index',
						width: 60,
						align: 'center',
						fixed: 'left'
					},
					{
						title: '评论人头像',
						key: 'publishUserAvatar',
						minWidth: 180,
						render: (h, params) => {
						  return h("Avatar", {
						    props: {
						      src: params.row.publishUserAvatar,
						    },
						  });
						},
					},
				  {
				    title: '评论人',
				    key: 'publishUserName',
				    minWidth: 120
				  },
					{
						title: '评论内容',
						key: 'commentContent',
						minWidth: 120
					},
					{
						title: '评论时间',
						key: 'commentTime',
						align: 'center',
						minWidth: 125
					},
					{
						title: '操作',
						key: 'action',
						width: 170,
						align: 'center',
						fixed: 'right',
						render: (h, params) => {
							return h('div', [
								h(
									'a',
									{
										on: {
											click: () => {
												this.reply(params.row);
											}
										}
									},
									'查看回复'
								),
								h('Divider', {
									props: {
										type: 'vertical'
									}
								}),
								h(
									'a',
									{
										on: {
											click: () => {
												this.remove(params.row);
											}
										}
									},
									'删除'
								)
							]);
						}
					}
				],
				selectList: [],
				replyData: [],
				replyColumns: [
					{
						title: '回复人头像',
						key: 'commentUserAvatar',
						minWidth: 120,
						render: (h, params) => {
						  return h("Avatar", {
						    props: {
						      src: params.row.commentUserAvatar,
						    },
						  });
						},
					},
					{
						title: '回复人昵称',
						key: 'commentUserName',
						minWidth: 180
					},
					{
						title: '评论内容',
						key: 'commentContent',
						minWidth: 180
					},
					{
						title: '评论时间',
						key: 'commentTime',
						minWidth: 180
					}
				]
			};
		},
		methods: {
			init() {
				getSzAppraisalDetail({
					id: this.data.appraisalId
				}).then(res => {
					if (res.status === 200) {
						this.form = {
							remark: res.result.remark,
							title: res.result.title,
							id: res.result.appraisalId
						};
						this.pics = res.result.pics;
						this.comments = res.result.comments;
					} else {
						this.pics = [];
						this.comments = [];
					}
				})
			},
			showSelect(e) {
				this.selectList = e;
				this.selectList.length = e.length;
			},
			reply(v) {
				if (v.commentReply === null) {
					this.$Message.warning('没有回复评论！');
					return
				}
				this.replyData = v.commentReply;
				this.replyVisible = true;
			},
			clearSelectAll() {
				this.$refs.table.selectAll(false);
			},
			remove(v) {
				this.$Modal.confirm({
					title: '确认删除',
					content: '您确认要删除该条帖子吗 ?',
					loading: true,
					onOk: () => {
						removeSzOrRealComment({ ids: v.commentId }).then(res => {
							this.$Modal.remove();
							if (res.success) {
								this.clearSelectAll();
								this.$Message.success('删除成功');
								this.init();
							}
						});
					}
				});
			},
			delAll() {
				if (this.selectList.length <= 0) {
					this.$Message.warning('您还未选择要删除的数据');
					return;
				}
				this.$Modal.confirm({
					title: '确认删除',
					content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
					loading: true,
					onOk: () => {
						let ids = '';
						this.selectList.forEach(function(e) {
							ids += e.commentId + ',';
						});
						ids = ids.substring(0, ids.length - 1);
						removeSzOrRealComment({ ids: ids }).then(res => {
							this.$Modal.remove();
							if (res.success) {
								this.$Message.success('删除成功');
								this.clearSelectAll();
								this.init();
							}
						});
					}
				});
			},
			submit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.form.pic = this.pics.join(',');
						if (this.type == "1") {
							// 编辑
							this.submitLoading = true;
							saveOrUpdateSzAppraisal(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						} else {
							// 添加
							this.submitLoading = true;
							this.form.type = 2;
							saveOrUpdateSzAppraisal(this.form).then((res) => {
								this.submitLoading = false;
								if (res.success) {
									this.$Message.success("操作成功");
									this.$emit("on-submit", true);
									this.visible = false;
								}
							});
						}
					}
				});
			},
			setCurrentValue(value) {
				if (value === this.visible) {
					return;
				}
				if (this.type == "1") {
					this.title = "编辑测评";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else if (this.type == "2") {
					this.title = "添加测评";
					this.maxHeight =
						Number(document.documentElement.clientHeight - 121) + "px";
				} else {
					this.title = "测评详情";
					this.maxHeight = "100%";
				}
				// 清空数据
				this.$refs.form.resetFields();
				if (this.type == "0" || this.type == "1") {
					// 回显数据
					this.init();
				} else {
					// 添加
					this.form = {
						pic: "",
						title: "",
						remark: "",
						type: 2
					};
					this.pics = [];
					this.comments = [];
				}
				this.visible = value;
			},
		},
		watch: {
			value(val) {
				this.setCurrentValue(val);
			},
			visible(value) {
				this.$emit("input", value);
			},
		}
	};
</script>

<style lang="less">
	@import "../../../styles/drawer-common.less";
	.list_block {
		display: flex;
		border-bottom: 1px solid #f5f5f5;
	
		.other_avatar {
			width: 40px;
			height: 40px;
			margin-right: 15px;
			border-radius: 35px;
		}
	
		.right_block {
			width: 590px;
	
			.right_name {
				color: #007aff;
			}
	
			.right_header {
				display: flex;
				font-size: 24px;
	
				.header_con {
					line-height: 35px;
					margin: 5px 0;
				}
	
				.header_flex {
					display: flex;
					align-items: center;
	
					image {
						width: 30px;
						margin-left: 10px;
					}
				}
			}
	
			.right_createTime {
				font-size: 20px;
				color: #cccccc;
			}
	
			.right_list {
				display: flex;
				font-size: 29px;
				line-height: 45px;
				margin: 10px 0;
	
				image {
					width: 50px;
					height: 50px;
					border-radius: 25px;
					margin-right: 10px;
				}
			}
		}
	}
</style>
